<template>
    <div class="all">
        <!-- 顶部四连框 -->
        <p style="font-size: 0.13rem;
        color: rgb(167, 167, 167);
        border-bottom: 1px solid rgb(210, 210, 210);
        width: 87%;
        margin: 0 auto;
        ">本月数据总览
                </p>
        <div class="top1">
            <div style="background: linear-gradient(to right, #2dc5ef, #b6ddff);">
                <el-icon style="color: aliceblue;" size="0.4rem">
                    <TrendCharts />
                </el-icon>
                <p>
                    <span style="font-size: 0.1rem;">交易总单数</span>
                    <span style="font-size: 0.27rem;font-weight: 800;
                        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                        color:rgb(0, 170, 255) ;">{{ all_list }}</span>
                </p>

            </div>
            <div style="background: linear-gradient(to right, #f77b7b, #f4b4b4);">
                <el-icon style="color: aliceblue;" size="0.4rem">
                    <List />
                </el-icon>
                <p>
                    <span style="font-size: 0.1rem;">退回总单数</span>
                    <span style="font-size: 0.27rem;font-weight: 800;
                        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                        color:#ff6969;">{{ all_outlist }}</span>
                </p>


            </div>
            <div style="background: linear-gradient(to right, #91e727, #9ef08d);">
                <el-icon style="color: aliceblue;" size="0.4rem">
                    <TrendCharts />
                </el-icon>
                <p>
                    <span style="font-size: 0.1rem;">完成总单数</span>
                    <span style="font-size: 0.27rem;font-weight: 800;
                        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                        color:#2bdf21;">{{ all_oklist }}</span>
                </p>

            </div>
            <div style="background: linear-gradient(to right, #ffcd50, #f5e59d);">
                <el-icon style="color: aliceblue;" size="0.4rem">
                    <Checked />
                </el-icon>
                <p>
                    <span style="font-size: 0.1rem;">出库总单数</span>
                    <span style="font-size: 0.27rem;font-weight: 800;
                        font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                        color:#ffbf1d ;">{{ all_order }}</span>
                </p>

            </div>
        </div>
        <!-- 订单情况 -->
        <div class="top2">
            <div class="top2_box">
                <p style="font-size: 0.13rem;color: rgb(167, 167, 167);border-bottom: 1px solid rgb(210, 210, 210);">当前订单
                </p>
                <div class="top2_box_child">
                    <p>
                        <span style="font-size: 0.12rem;color: rgb(18, 217, 35);">完成订单</span>
                        <span style="font-size: 0.20rem;color: rgb(137, 186, 255);">{{ all_oklist }}</span>
                    </p>
                    <p>
                        <span style="font-size: 0.12rem;">出库订单</span>
                        <span style="font-size: 0.20rem;color: rgb(137, 186, 255);">{{ all_order }}</span>
                    </p>
                    <p>
                        <span style="font-size: 0.12rem;color: rgb(17, 68, 209);">待发货单</span>
                        <span style="font-size: 0.20rem;color: rgb(137, 186, 255);">{{ all_out }}</span>
                    </p>
                    <p>
                        <span style="font-size: 0.12rem;color: rgb(221, 156, 36);">审批订单</span>
                        <span style="font-size: 0.20rem;color: rgb(137, 186, 255);">{{ all_approval }}</span>
                    </p>
                    <p>
                        <span style="font-size: 0.12rem;color: red;">问题订单</span>
                        <span style="font-size: 0.20rem;color: rgb(137, 186, 255);">{{ all_outlist }}</span>
                    </p>
                </div>
            </div>
            <div class="top2_box">
                <p style="font-size: 0.13rem;color: rgb(167, 167, 167);border-bottom: 1px solid rgb(210, 210, 210);">商品概况
                </p>
                <div class="top2_box_child">
                    <p>
                        <span style="font-size: 0.12rem;">全部商品</span>
                        <span style="font-size: 0.20rem;color: orange">{{ product_list }}</span>
                    </p>
                    <p>
                        <span style="font-size: 0.12rem;">积分商品</span>
                        <span style="font-size: 0.20rem;color: orange">{{ integral_product }}</span>
                    </p>
                    <p>
                        <span style="font-size: 0.12rem;">已售商品</span>
                        <span style="font-size: 0.20rem;color: orange">{{ all_oklist }}</span>
                    </p>
                    <p>
                        <span style="font-size: 0.12rem;">审批订单</span>
                        <span style="font-size: 0.20rem;color: orange">{{ all_approval }}</span>
                    </p>
                    <p>
                        <span style="font-size: 0.12rem;">滞留商品</span>
                        <span style="font-size: 0.20rem;color: orange">{{ all_out }}</span>
                    </p>
                </div>
            </div>
        </div>
        <!-- 快捷入口 -->
        <div class="entrance">
            <p
                style="margin: 0.1rem;font-size: 0.1rem;color: rgb(167, 167, 167);border-bottom: 1px solid rgb(210, 210, 210);">
                快捷入口</p>
            <div class="entrance_box">
                <div @click="$router.push('/xxk/xxk_order')">
                    <div class="entrance_box_icon" style="background-color: #b9ffef;">
                        <el-icon size=0.3rem style="color: rgb(8, 169, 8);">
                            <List />
                        </el-icon>
                    </div>
                    <p style="margin-top: 0.06rem; font-size: 0.08rem;text-align: center;">全部订单</p>
                </div>
                <div @click="$router.push('/xxk/Shipped')">
                    <div class="entrance_box_icon" style="background-color: #b9ffef;">
                        <el-icon size=0.3rem style="color:  rgb(8, 169, 8);">
                            <Checked />
                        </el-icon>
                    </div>
                    <p style="margin-top: 0.06rem; font-size: 0.08rem;text-align: center;">发货订单</p>
                </div>
                <div @click="$router.push('/xxk/Self_bill')">
                    <div class="entrance_box_icon" style="background-color: #d3ffb9;">
                        <el-icon size=0.3rem style="color: rgb(8, 169, 8);">
                            <WalletFilled />
                        </el-icon>
                    </div>
                    <p style="margin-top: 0.06rem; font-size: 0.08rem;text-align: center;">待发货单</p>
                </div>
                <div @click="$router.push('/xxk/Under_review')">
                    <div class="entrance_box_icon" style="background-color: #ffe5b9;">
                        <el-icon size=0.3rem style="color: #e7c427;">
                            <Management />
                        </el-icon>
                    </div>
                    <p style="margin-top: 0.06rem; font-size: 0.08rem;text-align: center;">审核订单</p>
                </div>
                <div @click="$router.push('/xxk/Error_ticket')">
                    <div class="entrance_box_icon" style="background-color: #ffb9b9;">
                        <el-icon size=0.3rem style="color: rgb(226, 88, 73);">
                            <Failed />
                        </el-icon>
                    </div>
                    <p style="margin-top: 0.06rem; font-size: 0.08rem;text-align: center;">退单处理</p>
                </div>
                <div @click="$router.push('/xxk/publish_activity')">
                    <div class="entrance_box_icon" style="background-color: #ffb9e3;">
                        <el-icon size=0.3rem style="color: #c274f3;">
                            <BellFilled />
                        </el-icon>
                    </div>
                    <p style="margin-top: 0.06rem; font-size: 0.08rem;text-align: center;">发布活动</p>
                </div>
                <div @click="$router.push('/xxk/count')">
                    <div class="entrance_box_icon" style="background-color: #f1ffb9;">
                        <el-icon size=0.3rem style="color: #ebf300;">
                            <Ticket />
                        </el-icon>
                    </div>
                    <p style="margin-top: 0.06rem; font-size: 0.08rem;text-align: center;">金券发放</p>
                </div>
                <div @click="$router.push('/xxk/commodity_list')">
                    <div class="entrance_box_icon" style="background-color: #d3ffb9;">
                        <el-icon size=0.3rem style="color: #91e727;">
                            <List />
                        </el-icon>
                    </div>
                    <p style="margin-top: 0.06rem; font-size: 0.08rem;text-align: center;">商品库存</p>
                </div>
            </div>
        </div>
        <!-- 可视化数据展示 -->
        <div class="data_show">
            <p
                style="margin: 0.1rem auto; font-size: 0.1rem;color: rgb(167, 167, 167);border-bottom: 1px solid rgb(167, 167, 167);">
                近几月数据展示</p>
            <div id="main"></div>
        </div>

        <!-- 本月数据总览 -->
        <div class="allShop">
            <p
                style="margin: 0.1rem auto; font-size: 0.1rem;color: rgb(167, 167, 167);border-bottom: 1px solid rgb(167, 167, 167);">
                订单库存展示</p>
            <div id="main2">

            </div>

        </div>

    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';
import { get_order_list, get_commodity_list } from '@/request/api/api'

type EChartsOption = echarts.EChartsOption;
onMounted(() => {
    getlist();
    get_product();
    getchart2();
})

let list = ref([])//订单列表
let all_list = ref() //交易总单数
let all_outlist = ref() //问题总单数
let all_oklist = ref() //完成总单数
let all_order = ref() //出库总单数
let all_approval = ref() //审批总单数 
let all_out = ref() //待发货总单数
let product = ref([])//商品列表
let product_list = ref()//商品总数
let integral_product = ref()//积分商品列表


const getlist = async () => {
    let res = await get_order_list({});
    list.value = res.list;
    all_list.value = res.list.length;
    all_outlist.value = res.list.filter((item: any) => item.withdraw).length;
    all_oklist.value = res.list.filter((item: any) => item.parment == '已完成').length;
    all_order.value = res.list.filter((item: any) => item.parment == '已出库').length;
    all_approval.value = res.list.filter((item: any) => item.parment == '审核中').length;
    all_out.value = res.list.filter((item: any) => item.parment == '待发货').length;
    order_echarts(res.list)
}


const get_product = async () => {
    let res = await get_commodity_list({});
    product.value = res.list;
    product_list.value = res.list.length;
    integral_product.value = res.list.filter((item: any) => item.commodity_istrue).length;
}



//处理订单数据
const order_echarts = (orders: any[]) => {
    // 定义月份和订单类型
    const months = ['五月', '六月', '七月', '八月', '九月', '十月'];
    const orderTypes = ['待发订单', '发货订单', '审批订单', '问题订单'];

    // 初始化统计数据
    const stats = {
        '待发订单': new Array(months.length).fill(0),
        '发货订单': new Array(months.length).fill(0),
        '审批订单': new Array(months.length).fill(0),
        '问题订单': new Array(months.length).fill(0)
    };

    // 处理订单数据
    orders.forEach(order => {
        const date = new Date(order.data);// 获取订单日期
        const month = date.getUTCMonth() + 1; // 月份从0开始，所以加1
        const monthIndex = month - 5; // 五月对应索引0，六月对应索引1，依此类推

        // 假设审批订单和问题订单的逻辑
        if (order.parment === '审核中') {
            stats['审批订单'][monthIndex]++;
        }
        if (order.withdraw) {
            stats['问题订单'][monthIndex]++;
        }
        if (order.parment === '待发货') {
            stats['待发订单'][monthIndex]++;
        }
        if (order.parment === '已出库') {
            stats['发货订单'][monthIndex]++
        }

    });

    // 构建最终的数据集
    const result = [['product', ...months]];
    for (const [orderType, counts] of Object.entries(stats)) {
        result.push([orderType, ...counts]);
    }
    console.log(result);
    
    getchart(result);
}


// 可视图标1
const getchart = (result: any) => {
    var chartDom = document.getElementById('main')!;
    const myChart = echarts.init(chartDom);
    var option: EChartsOption;
    setTimeout(function () {
        option = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: result //将数据传入
            },
            xAxis: { type: 'category' },//x轴类型
            yAxis: { gridIndex: 0 },//y轴索引
            grid: { top: '60%' },//网格位置
            series: [
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                },
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '40%',
                    center: ['50%', '30%'],
                    emphasis: {
                        focus: 'self'
                    },
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2012',
                        tooltip: '2012'
                    }
                }
            ]
        };

        myChart.on('updateAxisPointer', function (event: any) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart.setOption<echarts.EChartsOption>({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });

        myChart.setOption<echarts.EChartsOption>(option);
    });

    option && myChart.setOption(option);


}

//可视化图表2
const getchart2 = () => {

    type EChartsOption = echarts.EChartsOption;
    var chartDom = document.getElementById('main2')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
            {
                type: 'category',
                data: ['六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '库存',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} '
                }
            },
            {
                type: 'value',
                name: '订单',
                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} '
                }
            }
        ],
        series: [
            {
                name: '订单量',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return (value as number);
                    }
                },
                data: [
                    20, 49, 30, 23, 25, 26, 13, 16, 36, 20, 34, 33
                ]
            },
            {
                name: '库存量',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return (value as number);
                    }
                },
                data: [
                    42, 39, 40, 34, 48, 24, 37, 38, 34, 45, 30, 23
                ]
            },
            {
                name: '完成订单总量',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return (value as number);
                    }
                },
                data: [20, 12, 13, 21, 13, 10, 20, 13, 23, 16, 12, 62]
            }
        ]
    };

    option && myChart.setOption(option);
}

</script>

<style lang="scss" scoped>
//顶部数据
.top1 {
    width: 90%;
    margin: auto;
    // border: 1px solid #ccc;
    padding: 0.1rem;
    border-radius: 0.1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.top1 div {
    width: 22%;
    height: 0.6rem;
    // border: 1px solid #ccc;
    box-shadow: 0 0 0.05rem #ccc;
    // padding: 0.17rem;
    box-sizing: border-box;
    border-radius: 0.05rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.top1 div p {
    // 内容自适应
    width: 40%;
    height: 90%;
    display: flex;
    flex-direction: column;
    color: white;
    // 超出隐藏
    overflow: hidden;
}

//第二层顶部 订单和商品信息
.top2 {
    width: 90%;
    margin: auto;
    // border: 1px solid #ccc;
    padding: 0.1rem;
    border-radius: 0.1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.top2_box {
    width: 48%;
    height: 1rem;
    // border: 1px solid #ccc;
    box-shadow: 0 0 0.05rem #ccc;
    padding: 0.17rem;
    box-sizing: border-box;
    border-radius: 0.05rem;
    display: flex;
    flex-direction: column;
    background-color: white;
    justify-content: space-between;
}

.top2_box p {
    overflow: hidden;
}

.top2_box_child {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.top2_box_child p {
    width: 18%;
    height: 7.5vh;

}

// 快捷入口
.entrance {
    width: 85%;
    height: 20%;
    padding: 0.1rem;
    margin: auto;
    // border: 1px solid #ccc;
    background-color: white;
    box-shadow: 0 0 0.02rem #ccc;
}

.entrance_box {
    width: 100%;
    height: 100%;
    margin-top: 0.15rem;
    display: flex;
    justify-content: space-around;
}

.entrance_box_icon {
    width: 0.4rem;
    height: 0.4rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.entrance_box_child p {
    width: 100%;
    height: 50%;
    display: flex;

}

//可视化大屏 标图
.data_show {
    width: 85%;
    padding: 0.1rem;
    margin: 0.1rem auto;
    // border: 1px solid #ccc;
    background-color: white;
    box-shadow: 0 0 0.02rem #ccc;
}

#main {
    margin: auto;
    width: 100%;
    height: 500px;
    text-align: center;
    margin-top: 0.2rem;
}

#main2 {
    margin: auto;
    width: 100%;
    height: 500px;
    text-align: center;
    margin-top: 0.2rem;
}

//数据展示
.allShop {
    width: 85%;
    padding: 0.1rem;
    margin: 0.1rem auto;
    // border: 1px solid #ccc;
    background-color: white;
    box-shadow: 0 0 0.02rem #ccc;
}
</style>